<template>
    <div>
        <div class="dahezi">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item >🏠</el-breadcrumb-item>
                <el-breadcrumb-item>我的消息</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="hezi">
                <div class="hezi2">
                    <!--                <div class="hezi3">-->
                    <div class="aaa">
                        <el-button type="primary" style="width:100px " @click="biaodu">全部标已读</el-button>
                        <!--                  内容-->
                            <div class="css1" v-for="(p,index) in messageList" :key="index">
                                <!--            帖子标题-->
                                <!--                一条帖子的框框，从这里开始v-for遍历-->

                                <el-tooltip class="item" effect="dark" content="点击查看详情" placement="bottom-start" >
                                    <el-button  @click="chakanxiangqing(index)">
                                        <div class="css2" >
                                                {{p.detail}}
                                                <div v-if="p.status=='1'" class="weiduxianshi" >
                                                        ●
                                                </div>
                                        </div>

                                    </el-button>
                                </el-tooltip>

                            </div>
                    </div>
                    <!--                </div>-->
                </div>
            </div>
            </div>
        </div>
</template>

<script>
    export default {
        name: "xiaoxi",
        inject: ['reload'],
        data() {
            return {
                messageList:[],
            }
        },
        created() {
            this.getList()
        },
        methods:{
            biaodu(){
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                 this.$http.get('message/updateStatus').then(response => {
                    console.log(response.data);
                    if (response.data.code === 200) {
                        // this.$message({showClose: true, message: "修改成功", type: "success"})
                        this.getList();
                        this.reload();
                    }
                });
            },
            async getList(){
              const {data:jieguo}=await this.$http.get('/message/list',{headers:{
                      'Authorization':window.sessionStorage.getItem('token')
                  }})
                console.log(jieguo);
              this.messageList=jieguo.data
                console.log(this.messageList);
          },
            async chakanxiangqing(index){
                if(this.messageList[index].status == 1){
                    const token = sessionStorage.getItem("token");
                    this.$http.defaults.headers.common['Authorization'] = token;
                    await this.$http.put('message/'+this.messageList[index].id).then(response => {
                        console.log(response.data);
                        if (response.data.code === 200) {
                            // this.$message({showClose: true, message: "修改成功", type: "success"})
                            this.getList();
                            this.reload();
                        }
                    });
                }
                if(this.messageList[index].detail.indexOf("用户关注") != -1){
                    this.$router.push({name: 'yonghuxinxichaxun' , query: {id: this.messageList[index].aid}});
                }else if(this.messageList[index].detail.indexOf("文章") != -1){
                    this.$router.push({name: 'wenzhangxiangqing' , query: {id: this.messageList[index].bid}});
                }else if(this.messageList[index].detail.indexOf("回答问题") != -1)
                    this.$router.push({name: 'tiezixiangqing' , query: {id: this.messageList[index].bid}});
            }
        },
        mounted() {
            /**
             * iframe-宽高自适应显示
             */
            function changeMobsfIframe() {
                const mobsf = document.getElementById('mobsf');
                const deviceWidth = document.body.clientWidth;
                const deviceHeight = document.body.clientHeight;
                mobsf.style.width = (Number(deviceWidth) - 240) + 'px'; //数字是页面布局宽度差值
                mobsf.style.height = (Number(deviceHeight) - 64) + 'px'; //数字是页面布局高度差
            }
            changeMobsfIframe()
            window.onresize = function () {
                changeMobsfIframe()
            }
        }
    }
</script>


<style scoped>
    .hezi{
        width: 70%;
        margin-left: 200px;
        height: 700px;
        display: flex;
        justify-content:center;
    }
    .hezi2{
        width: 100%;
        background-color: white;
        height: 650px;
        margin-top: 3px;
    }

    .dahezi{
        padding-top: 3px;
        background-color: #fffacd;
    }
    .aaa{
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: scroll;
        height: 650px;
    }
    .css1{
        height: 100px;
        width: 100%;
        margin-left: 100px;
        margin-top: 10px;
        /*background: #fffacd;*/
    }
    .css2{
        width: 800px;
        height: 30px;
        color: black;

    }
    .weiduxianshi{
        background: #FFFFE0;
        color: red;
        float: right;
        align-content: center;
    }
</style>
